<template>
	<div>
		<div id="app">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					<span>个人信息</span>
				</div>
				<div v-if="us" class="text item" style="margin-left: -113px;">
					姓名:{{us.name}}
				</div>
				<div v-if="us" class="text item" style="margin-left: -100px;">
					账号:{{us.username}}
				</div>
				<div v-if="us" class="text item" style="margin-left: -65px;">
					手机号:{{us.phone}}
				</div>
				<div v-if="us" class="text item" style="margin-left: -100px;">
					积分:{{count}}<br>
				</div>
			</el-card>
			
			<ul>
				<li>
					  <el-button type="primary" round style='color: red;' class='zhuxiao'   @click='zhuxiao()'>注销</el-button>	
				</li>
				<li>
					  <el-button type="primary" round style='color: red;' class='guashi' @click='guashi()'>挂失</el-button>
				</li>
				<li>
					  <el-button type="primary" round style='color: red;' class='tuichu' @click='tuichu'>退出</el-button>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import store from '../../store/modules/user.js'
    import axios from "axios"
	export default {
		data() {
			return {
				user: store.state.userList,
				us: store.state.user,
				count: store.state.count
			}
		},
		computed: {
			name() {
				return this.data
			}
		},
		created() {
			store.dispatch("getAlluser")
		},
		mounted() {
			 window.addEventListener( 'beforeunload', e => this.tuichu() );//
		},
		methods: {
			zhuxiao(){
				// var params = new URLSearchParams();
				// params.append('id',this.us.id);
				var params ={}
				params["id"]=this.us.id;
				console.log(params);
				var that=this;
				axios.post('/user/guashi',params,{
					header:{'Content-type':'application/json;charset=UTF-8'}
					})
				.then(function(data) {
					alert("注销成功")
					that.$router.push({
						path:"/"
					})
						var storage = window.localStorage;
						storage.clear();
					console.log(data);
				}).catch(function(Error) {
					console.log(Error);
				});
			},
			guashi(){
				// var params = new URLSearchParams();
				// params.append('id',this.us.id);
				var params ={}
				params["id"]=this.us.id;
				console.log(params);
				var that=this;
				axios.post('/user/guashi',params,{
					header:{'Content-type':'application/json;charset=UTF-8'}
					})
				.then(function(data) {
					alert("你的账号已成功被挂失")
					that.$router.push({
						path:"/"
					})
						var storage = window.localStorage;
						storage.clear();
					console.log(data);
				}).catch(function(Error) {
					console.log(Error);
				});
			},
			tuichu(){
				var params = new URLSearchParams();
				params.append('id',this.us.id);
				var that=this;
				axios.post('/user/tuichu',params,{
					header:{'Content-type':'application/x-www-form-urlencoded;charset=UTF-8'}
					})
				.then(function(data) {
					alert("你的账号已经退出")
					that.$router.push({
						path:"/"
					})
						var storage = window.localStorage;
						storage.clear();
					console.log(data);
				}).catch(function(Error) {
					console.log(Error);
				});
			}



		}
	}
</script>

<style scoped>
	#app {
		width: 1200px;
		margin: 0 auto;
		position: absolute;
		top: 200px;
		left: 300px;
	}

	#app1 {
		position: absolute;
		top: 12.5rem;
		left: 100px;
	}

	.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 18px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 480px;
	}
	
	.zhuxiao {
		position: absolute;
		top: 70px;
		left: 340px;
	}
	
	.guashi {
		position: absolute;
		top: 120px;
		left: 340px;
	}
	
	.tuichu {
		position: absolute;
		top: 170px;
		left: 340px;
	}
</style>
